//扩展jquery功能 
(function ($) {
  $("body").append('<div class="drawerMask" style="position:fixed;width:100%;height:100%;background: black;left:0px;top:0px;z-index: 888;display:none;opacity: 0.5;"></div>')
          $.fn.extend({
              // 初始化
              "drawerInit": function () {
                  var _this=this;
                  var width=window.innerWidth;
                  var height=window.innerHeight;
                  _this.css('width',width+"px")
                  .css('height',height+"px")
                  // .css('background',"rgba(0,0,0,.5)")
                  .css('position',"fixed")
                  .css('top',"0px")
                  .css('z-index',999)
                  .css('right',-width+"px");
                  var startX=0
                  var distance=0
                  _this.bind("touchstart",function(e){
                      var touch=e.originalEvent.touches[0];
                      startX=touch.clientX;
                  })
                  _this.bind("touchmove",function(e){
                      var touch=e.originalEvent.touches[0];
                      var moveX=touch.clientX;
                      distance=moveX-startX;
                      if(distance<0){
                          distance=0;
                      }
                      _this.css('right',-distance+"px");
                  })
                  _this.bind("touchend",function(e){
                      var width=window.innerWidth;
                      if(distance>=width/3){
                          _this.animate({right:-width+"px"},300,function(){$(".drawerMask").hide()});
                      }
                      if(distance<width/3){
                          _this.animate({right:"0px"},300);
                      }
                      distance=0;
                  })
                  var content=_this.find(".self-drawer-content");
                  content.css('width',(width*0.8)+"px")
                  .css('height',height+"px")
                  .css('background',"white")
                  .css('position',"absolute")
                  .css('top',"0px")
                  .css('right',"0px")
                  var close=_this.find(".close");
                  close.css('width',"20px")
                  .css('height',"20px")
                  .css('font-size',"15px")
                  .css('display',"flex")
                  .css('justify-content',"center")
                  .css('align-items',"center")
                  .css('background',"white")
                  .css('position',"absolute")
                  .css('top',"0px")
                  .css('right',"0px")
                  .css('z-index',999)
                  .css('border',"1px solid black")
                  .css('border-radius',"100%")
                  close.click(function(){
                      _this.animate({right:-width+"px"},500,function(){$(".drawerMask").hide()});
                     
                  })
              },
              // 展示抽屉
              "drawerShow": function () {
                  var _this=this;
                  $(".drawerMask").show()
                  _this.show();
                  _this.animate({right:"0px"},500);
              },
              // 关闭抽屉
              "drawerHide": function () {
                  var _this=this;
                  var width=window.innerWidth;
                  _this.animate({right:-width+"px"},500,function(){$(".drawerMask").hide()});
              },

          });
      })(jQuery);